/**
* Created by yyr on 2018/1/18
*已设立基金编辑选项卡闲散理财
*/
<template>
    <div>
        <div class="ca-box-border-top-none ca-p-22">
            <el-row>
                <el-col :span="12" class="ca-title">
                    <h3>闲散理财</h3>
                    <div class="clear"></div>
                </el-col>
                <el-col :span='12' class="ca-align-right">
                    <div>
                        <el-button type="primary" @click="idleFinancingAdd()" size="medium">保存</el-button>
                        <el-button  @click="cancel()" size="medium">取消</el-button>
                    </div>
                </el-col>
            </el-row>
            <table class="ca-table ca-m-t-15">
                <tr>
                    <th width="15%">买入时间</th>
                    <th width="15%">产品名称</th>
                    <th width="12%">总额(万元)</th>
                    <th width="15%">预期年化收益率（%）</th>
                    <th width="15%">赎回时间</th>
                    <th width="12%">净收益(万元)</th>
                    <th width="15%">备注</th>
                    <th width="5%" class="p-tb-0"><button type="button" class="ca-btn ca-btn-round" @click="pushIdleFinancing()"><i class="fa fa-plus"></i></button></th>
                </tr>
                <tr v-for="(row,index) in idleDataList" :key="index">
                    <td>
                        <el-date-picker type="date" v-model="row.purchase" placeholder="选择日期" style="width:100%"></el-date-picker>
                    </td>
                    <td>
                        <el-input v-model="row.productName" placeholder="选择输入内容"></el-input>
                    </td>
                    <td>
                        <el-input v-model="row.total"  class="ca-vertical-align-middle" placeholder="选择输入内容"></el-input>
                    </td>
                    <td>
                        <el-input v-model="row.yield"  class="ca-vertical-align-middle" placeholder="选择输入内容"></el-input>
                    </td>
                    <td>
                        <el-date-picker type="date" v-model="row.redeem" placeholder="选择日期" style="width:100%"></el-date-picker>
                    </td>
                    <td>
                        <el-input v-model="row.profit"  class="ca-vertical-align-middle" placeholder="选择输入内容"></el-input>
                    </td>
                    <td>
                        <el-input v-model="row.remarks"  class="ca-vertical-align-middle" placeholder="选择输入内容" :maxlength="200"></el-input>
                    </td>
                    <td class="p-tb-0"><button type="button" class="ca-btn ca-btn-round" @click="deleteIdleFinancingList(index,row.id)"><i class="fa fa-remove"></i></button></td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import {api} from '../api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp'
    export default {
        data() {
            return {
                idleDataList: [],
                itemId: this.$route.params.fundId,
                idleFinancingData: {
                    id: '',
                    fundId: this.$route.params.fundId,
                    total: '',//	金额	string
                    purchase: this.$moment().format('YYYY-MM-DD'),//	买入时间	string
                    profit: '',//	净收益
                    yield: '',//	收益百分比	string
                    productName: '',//	产品名称	string
                    redeem: this.$moment().format('YYYY-MM-DD'),//	赎回时间	string
                    remarks: '',//备注
                },
            }
        },
        props: {
        },
        created() {
            this.getFundIdleList();
        },
        methods: {
            //获取列表
            getFundIdleList() {
                apiHttp(api.GET_FUND_IDLE,{id: this.itemId}).then( ret=>{
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        this.idleDataList = ret.data;
                    }
                })
            },
            pushIdleFinancing() {
                this.idleDataList.push(Object.assign({},this.idleFinancingData))
            },
            deleteIdleFinancingList(index,id) {
                this.$confirm('确定要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    apiHttp(api.DEl_FUND_IDLE,{id: id}).then( ret=>{
                        if (ret.resCode === STATUS_HTTP_SUCCESS) {
                            this.$message({type: 'success',message: '删除成功!',center: true});
                            this.getFundIdleList();
                        }
                    })
                })
            },
            //保存
            idleFinancingAdd() {
                apiHttp(api.CHANGE_FUND_IDLE,this.idleDataList).then( ret=>{
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            center: true
                        });
                        this.$emit('addRedDot')
                        this.cancel();
                    }
                })
            },
            //取消保存
            cancel() {
                this.$emit('isEdit',false)
            }
        },
        components: {
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    table td{
        padding: 5px 5px;
        box-sizing: border-box;
    }
</style>
